/*
*   @Author: 1296
*   @Date: 2025-05-05
*   @Description: 签到记录学生端
*/
<template>
  <div class="attendance-record-container">
    <div class="record-list" v-if="attendanceRecords.length > 0">
      <h2>签到记录</h2>
      <el-table :data="attendanceRecords" style="width: 100%">
        <el-table-column prop="title" label="活动名称"></el-table-column>
        <el-table-column prop="courseName" label="课程名称"></el-table-column>
        <el-table-column prop="status" label="签到状态">
          <template #default="scope">
            <span v-if="scope.row.status === '0'">已签到</span>
            <span v-else-if="scope.row.status === '1'">缺勤</span>
            <span v-else-if="scope.row.status === '2'">事假</span>
            <span v-else-if="scope.row.status === '3'">病假</span>
            <span v-else-if="scope.row.status === '4'">公假</span>
            <span v-else-if="scope.row.status === '5'">迟到</span>
            <span v-else-if="scope.row.status === '6'">早退</span>
            <span v-else-if="scope.row.status === '7'">待签到</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="签到时间"></el-table-column>
        <el-table-column prop="teacherName" label="发布教师"></el-table-column>
      </el-table>

      <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="totalRecords"
          layout="prev, pager, next"
          @current-change="handlePageChange"
      ></el-pagination>
    </div>

    <div class="empty-state" v-else>
      <div class="icon">
        <el-icon><FolderOpened /></el-icon>
      </div>
      <p>暂无签到记录</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { defineComponent, ref, onMounted } from 'vue';
import { FolderOpened } from '@element-plus/icons-vue';
import store from "@/store";

const api = axios.create({
  baseURL: store.getters.getBaseURL
});

// 添加请求和响应拦截器
api.interceptors.request.use(config => {
  const token = sessionStorage.getItem('userToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

api.interceptors.response.use(
    response => response,
    error => {
      if (error.response?.status === 401) {
        window.location.href = '/loginAndRegister';
      }
      return Promise.reject(error);
    }
);

export default defineComponent({
  name: 'AttendanceRecord',
  components: { FolderOpened },
  setup() {
    const attendanceRecords = ref([]);
    const currentPage = ref(1);
    const pageSize = ref(8);
    const totalRecords = ref(0);
    const loading = ref(false);

    const fetchAttendanceRecords = async () => {
      loading.value = true;
      try {
        const response = await api.get(`/record?pageNo=${currentPage.value}&pageSize=${pageSize.value}`);
        if (response.data.status === 'success') {
          attendanceRecords.value = response.data.data.list;
          totalRecords.value = response.data.data.resultCount;
        } else {
          ElMessage.error(response.data.info || '获取签到记录失败');
        }
      } catch (error) {
        console.error('Error fetching attendance records:', error);
        ElMessage.error('获取签到记录失败');
      } finally {
        loading.value = false;
      }
    };

    const handlePageChange = (page) => {
      currentPage.value = page;
      fetchAttendanceRecords();
    };

    // 页面加载时获取签到记录
    onMounted(() => {
      fetchAttendanceRecords();
    });

    return {
      attendanceRecords,
      currentPage,
      pageSize,
      totalRecords,
      loading,
      handlePageChange
    };
  }
});
</script>

<style scoped>
.attendance-record-container {
  padding: 20px;
}

.record-list {
  margin-top: 20px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  color: #909399;
}

.icon {
  font-size: 60px;
  margin-bottom: 15px;
}

h2 {
  margin-bottom: 15px;
  color: #333;
}

.el-pagination {
  margin-top: 15px;
  text-align: center;
}
</style>